<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>

<body>
<table id="customers">
  <thead>
    <tr>
      <th>URL route</th>
      <th>Endpoint name</th>
      <th>HTTP methods</th>
      <th>Is alias</th>
      <th>Redirect to</th>
    </tr>
  </thead>
  <tbody>
    {% if routes %}
      {% for route in routes|sort(attribute='rule') %}
        <tr>
          <td>{{ route.rule }}</td>
          <td>{{ route.endpoint }}</td>
          <td>{{ route.methods|sort|join(', ') }}</td>
          <td>{{ route.alias }}</td>
          <td>{{ route.redirect_to }}</td>
        </tr>
      {% endfor %}
    {% else %}
      <tr>
        <td>No routes have been configured.</td>
      </tr>
    {% endif %}
  </tbody>
</table>
</body>
</html>